<route lang="json5">
{
  style: { navigationBarTitleText: 'Profile' },
}
</route>

<template>
  <view class="page-container">
    <view class="user-card">
      <view class="user-info">
        <view class="info-content">
          <text class="nickname">{{ userInfo.name || userInfo.account || 'Not Logged In' }}</text>
          <br />
          <text class="email">{{ userInfo.email || 'Click to login' }}</text>
        </view>
      </view>
      <view class="user-details">
        <view class="detail-item">
          <text class="label">Member Since</text>
          <text class="value">{{ formatDate(userInfo.createTime) }}</text>
        </view>
        <view class="detail-item">
          <text class="label">Last Active</text>
          <text class="value">{{ formatDate(userInfo.latestLoginTime) }}</text>
        </view>
      </view>
    </view>

    <view class="menu-group">
      <wd-cell-group>
        <wd-cell title="Waiting Feedback" is-link @click="navigateToFeedback" />
        <wd-cell title="Email" :value="userInfo.email" />
      </wd-cell-group>
    </view>

    <view class="menu-group">
      <wd-cell-group>
        <wd-cell title="Help Center" is-link />
        <wd-cell title="About Us" is-link />
      </wd-cell-group>
    </view>

    <view class="logout-section" v-if="userStore.isLogined">
      <button class="logout-btn" @click="handleLogout">Log Out</button>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useUserStore } from '@/store'
import { user } from '@/service/user'

const userStore = useUserStore()
const userInfo = ref({})

// 格式化日期
const formatDate = (dateStr) => {
  if (!dateStr) return ''
  return new Date(dateStr).toLocaleDateString('en-US', {
    year: 'numeric',
    month: 'short',
    day: 'numeric',
  })
}

// 获取用户详细信息
const fetchUserInfo = async () => {
  try {
    const { data } = await user()
    userInfo.value = data
  } catch (error) {
    console.error('Failed to fetch user info:', error)
  }
}

const navigateToFeedback = () => {
  uni.navigateTo({
    url: '/pages/my/feedback', // 修正路径
  })
}

const handleLogout = () => {
  uni.showModal({
    title: 'Confirm Logout',
    content: 'Are you sure you want to log out?',
    success: (res) => {
      if (res.confirm) {
        userStore.clearUserInfo()
        uni.showToast({
          title: 'Logged out',
          icon: 'success',
        })
        checkLogin()
      }
    },
  })
}

const checkLogin = () => {
  if (!userStore.isLogined) {
    uni.navigateTo({
      url: '/pages/my/login',
    })
    return false
  }
  return true
}

onMounted(() => {
  if (checkLogin()) {
    fetchUserInfo()
  }
})
</script>

<style lang="scss">
.page-container {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 30rpx;
}

.user-card {
  padding: 40rpx 30rpx;
  margin-bottom: 20rpx;
  background-color: #fff;

  .user-info {
    display: flex;
    align-items: center;
    margin-bottom: 30rpx;

    .avatar {
      width: 120rpx;
      height: 120rpx;
      border-radius: 50%;
    }

    .info-content {
      .nickname {
        font-size: 36rpx;
        font-weight: bold;
        color: #333;
      }

      .email {
        margin-top: 10rpx;
        font-size: 28rpx;
        color: #666;
      }
    }
  }

  .user-details {
    border-top: 1px solid #f0f0f0;
    padding-top: 20rpx;

    .detail-item {
      display: flex;
      justify-content: space-between;
      margin-bottom: 16rpx;

      .label {
        color: #666;
        font-size: 28rpx;
      }

      .value {
        color: #333;
        font-size: 28rpx;
      }
    }
  }
}

.menu-group {
  margin-bottom: 20rpx;
  background-color: #fff;

  :deep(.wd-cell) {
    padding: 16px;
  }
}

.logout-section {
  margin: 40rpx 30rpx;

  .logout-btn {
    width: 100%;
    padding: 20rpx 0;
    font-size: 32rpx;
    color: #fff;
    background-color: #ff4d4f;
    border: none;
    border-radius: 8rpx;

    &:active {
      opacity: 0.8;
    }
  }
}
</style>
